Component({
  properties: {
    // 转盘配置
    config: {
      type: Object,
      value: {
        title: '幸运大转盘',
        options: [],
        duration: 3000,
        sound: true,
        animation: true
      },
      observer(newVal, oldVal) {
        console.log('config属性变化:', newVal);
        if (!newVal) return;
        
        // 无论如何，只要配置变化就更新
        if (newVal.options && Array.isArray(newVal.options)) {
          console.log('检测到config.options变化，当前选项数量:', newVal.options.length);
          // 直接更新奖品配置并重绘
          this.updatePrizes(newVal.options);
        } else {
          console.log('config变化但没有有效的options数据');
        }
      }
    }
  },

  data: {
    showResult: false,
    result: null,
    prizes: []
  },

  lifetimes: {
    attached() {
      console.log('组件attached');
      this.initWheel();
    },
    ready() {
      console.log('组件ready');
    }
  },

  methods: {
    // 初始化转盘
    initWheel() {
      console.log('初始化转盘');
      const { config } = this.properties;
      
      // 如果有配置的选项，使用它们初始化奖品
      if (config.options && config.options.length > 0) {
        console.log('使用config.options初始化:', config.options);
        this.setData({
          prizes: config.options.map((option, index) => ({
            index,
            name: option.name,
            background: option.color || '#ffffff'
          }))
        }, () => {
          this.drawWheelCanvas();
        });
      } else {
        console.log('没有有效的选项数据');
        this.drawWheelCanvas();
      }
    },

    // 创建并获取canvas上下文
    getCanvasContext() {
      try {
        return wx.createCanvasContext('wheel-canvas', this);
      } catch (error) {
        console.error('创建canvas上下文失败:', error);
        return null;
      }
    },

    // 绘制转盘到canvas
    drawWheelCanvas() {
      const ctx = this.getCanvasContext();
      if (!ctx) {
        console.error('获取canvas上下文失败');
        return;
      }
      
      // 清空画布
      ctx.clearRect(0, 0, 300, 300);
      
      // 绘制转盘
      this.drawWheel(ctx, this.data.prizes);
    },

    // 更新奖品配置
    updatePrizes(prizes) {
      console.log('组件接收到新的奖品配置:', prizes);
      if (!prizes || !Array.isArray(prizes)) {
        console.error('prizes不是有效的数组');
        return;
      }
      
      // 处理传入的数据格式，转换为内部使用的格式
      const formattedPrizes = prizes.map((item, index) => ({
        index,
        name: item.name,
        background: item.color || item.background || '#ffffff'
      }));
      
      console.log('格式化后的奖品数据:', formattedPrizes);
      
      this.setData({
        prizes: formattedPrizes
      }, () => {
        console.log('prizes数据已更新，准备重绘转盘');
        // 确保在数据更新后立即重绘
        wx.nextTick(() => {
          this.drawWheelCanvas();
        });
      });
    },

    // 绘制转盘
    drawWheel(ctx, options) {
      // 使用prizes数据如果存在，否则使用options
      const items = this.data.prizes.length > 0 ? this.data.prizes : options;
      
      console.log('绘制转盘，选项数量:', items?.length);
      
      if (!items || items.length === 0) {
        console.warn('没有选项可绘制');
        return;
      }
      
      const centerX = 150;
      const centerY = 150;
      const radius = 140;
      const angle = (2 * Math.PI) / items.length;

      // 绘制外圈
      ctx.beginPath();
      ctx.arc(centerX, centerY, radius + 5, 0, 2 * Math.PI);
      ctx.setFillStyle('#E64340');
      ctx.fill();

      // 绘制扇形
      items.forEach((item, index) => {
        const startAngle = index * angle;
        const endAngle = (index + 1) * angle;

        ctx.beginPath();
        ctx.moveTo(centerX, centerY);
        ctx.arc(centerX, centerY, radius, startAngle, endAngle);
        ctx.closePath();
        
        // 使用background或color属性
        const backgroundColor = item.background || item.color || '#ffffff';
        ctx.setFillStyle(backgroundColor);
        ctx.fill();

        // 绘制文字
        const textAngle = startAngle + angle / 2;
        const textX = centerX + (radius * 0.7) * Math.cos(textAngle);
        const textY = centerY + (radius * 0.7) * Math.sin(textAngle);
        
        ctx.setFontSize(14);
        ctx.setTextAlign('center');
        ctx.setTextBaseline('middle');
        ctx.setFillStyle('#333333');
        ctx.save();
        ctx.translate(textX, textY);
        ctx.rotate(textAngle + Math.PI / 2);
        ctx.fillText(item.name, 0, 0);
        ctx.restore();
      });

      // 绘制中心圆
      ctx.beginPath();
      ctx.arc(centerX, centerY, 30, 0, 2 * Math.PI);
      ctx.setFillStyle('#FFC107');
      ctx.fill();

      // 绘制"GO"文字
      ctx.setFontSize(20);
      ctx.setTextAlign('center');
      ctx.setTextBaseline('middle');
      ctx.setFillStyle('#FFFFFF');
      ctx.fillText('GO', centerX, centerY);

      // 执行绘制
      ctx.draw(false, () => {
        console.log('转盘绘制完成');
      });
    },

    // 开始抽奖
    start() {
      const { config } = this.properties;
      const items = this.data.prizes.length > 0 ? this.data.prizes : config.options;
      
      if (!items || items.length === 0) {
        wx.showToast({
          title: '请先配置转盘选项',
          icon: 'none'
        });
        return;
      }
      
      const { duration } = config;
      
      // 随机选择结果
      const randomIndex = Math.floor(Math.random() * items.length);
      const result = items[randomIndex];

      console.log('开始抽奖，选中:', result);

      // 播放音效
      if (config.sound) {
        this.playSound();
      }

      // 显示结果
      setTimeout(() => {
        this.setData({
          showResult: true,
          result
        });
      }, duration);
    },

    // 播放音效
    playSound() {
      const innerAudioContext = wx.createInnerAudioContext();
      innerAudioContext.src = '/assets/audio/lottery.mp3';
      innerAudioContext.play();
    },

    // 关闭结果弹窗
    hideResult() {
      this.setData({
        showResult: false,
        result: null
      });
    }
  }
})